import React, {PureComponent} from "react"
import "./index.less"
import {ArrowLeftOutlined, CloudDownloadOutlined} from '@ant-design/icons';
import {Button, Divider, Spin, Tag} from "antd";
import {defaultSize} from "../../../../../shared/project-config"
import {withRouter} from "react-router"
import "animate.css"
import orderCompose from "./compose"
import statusRender from "../../../status"
import FileItem from "../../../../library/components/info/item"


export default @withRouter
@orderCompose
class OrderFinished extends PureComponent {
  render() {

    const {
      data, toBack, toDownload, onFileCheck, isChecked, toBatchDownload, checkedFiles
    } = this.props
    const items = data.items || []

    return (
      <div className={'order-panel'}>
        <div className={'order-info-panel'}>
          <h1>已完成订单</h1>
          <div className={'order-status'}>{statusRender[data.status]}</div>
          <div className={'info-box'}>
            <table>
              <tr>
                <td>
                  <label>订单编号</label>
                  <div className={'td-order-no'}>{data.orderNo || ''}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <label>总金额</label>
                  <div className={'order-fee'}><span>￥</span> {((data.fee || 0) / 100).toFixed(2)}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <label>创建时间</label>
                  <div>{data['createTime']}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <label>支付时间</label>
                  <div>{data['payTime']}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <label>订单内容</label>
                  {
                    items.map((i, idx) => {
                        const file = {
                          accessible: false,
                          id: i.fileId,
                          originalName: i.originalName
                        }
                        const data = {
                          sizeName: '',
                          code: i.clothingCode,
                          price: i.price
                        }
                        return <FileItem toDownload={toDownload}
                                         readOnly={false}
                                         file={file}
                                         onFileCheck={onFileCheck}
                                         isCheck={isChecked}
                                         data={data}
                                         price={i.price}
                                         type={i['fileType']}/>
                      }
                    )
                  }
                </td>
              </tr>
              <tr>
                <td>
                  <div className={'order-buttons'}>
                    <Button size={defaultSize} type={'primary'} onClick={toBack}>
                      <ArrowLeftOutlined/>返回
                    </Button>

                    <div style={{width: 20, display: 'inline-block'}}></div>

                    {
                      checkedFiles && checkedFiles.length > 0 ?
                        <Button size={defaultSize} type={'primary'}
                                onClick={toBatchDownload(checkedFiles)}>
                          <CloudDownloadOutlined/> 打包下载 [{checkedFiles.length}]
                        </Button> : undefined
                    }
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    );
  }
}